// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

$font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';

@import '~@mozilla-protocol/core/protocol/css/includes/lib';

// * -------------------------------------------------------------------------- */
// Masthead

.c-page-header {
    .mzp-l-content {
        padding-bottom: $spacing-md;
        padding-top: $spacing-md;
    }
}

// * -------------------------------------------------------------------------- */
// Main content

.page-body {
    text-align: center;
}

.c-main-logo {
    border-radius: 100%;
    margin: 0 auto $layout-md;
    padding: $spacing-lg;
}

.c-main-title {
    @include text-title-md;
    color: $title-text-color;

    @supports (--css: variables) {
        color: var(--title-text-color);
    }
}

.c-main-tagline {
    margin: $spacing-2xl auto;
    max-width: $content-md - ($spacing-2xl * 2);
    text-align: left;
}

// * -------------------------------------------------------------------------- */
// Utilities

.c-utilities {
    @include text-body-sm;
    max-width: $content-md;
    padding-bottom: $layout-xl;
    text-align: center;
}

// * -------------------------------------------------------------------------- */
// Dark mode

@media (prefers-color-scheme: dark) {
    #outer-wrapper {
        background: $color-dark-gray-60;
        color: $title-text-color-inverse;

        @supports (--css: variables) {
            color: var(--title-text-color-inverse);
        }
    }

    .c-main-title,
    .mzp-c-picto-title {
        color: $title-text-color-inverse;

        @supports (--css: variables) {
            color: var(--title-text-color-inverse);
        }
    }

    .c-main-logo {
        background-color: $color-white;
    }

    .c-utilities {
        @include white-links;
    }
}
